<template>
	<view class="info-packbox relative flex-direction-column flex-align-items-center">

		<view class="relative" style="z-index: 10;">
			<view class="relative mx-auto" style="z-index: -10;width: 120rpx;height: 140rpx;">
				<image class="bg" 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/mowang-avatar-bg${!ouHuangInfo.avatar ? '-who' : ''}.png`" mode=""></image>
				<image class="absolute info-head" :src="ouHuangInfo.avatar" mode=""></image>
			</view>
		</view>
		
		<view class="flex-all-center info-detail absolute text-nowrap" v-if="ouHuangInfo.avatar"
			:style="{
				background: `url(${commonConfigs.domainFrontFileLink}/files/images/infinite/mowang-text.png) 0 0 no-repeat`,
				backgroundPosition: 'center',
				backgroundSize: '186rpx 40rpx',
			}"
		>
			已占领<text class="info-detail-nums">{{ ouHuangInfo.num_sort_diff }}</text>发
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "comDragInfo",
		props: {
			ouHuangInfo: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {

			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
	}
</script>

<style lang="scss" scoped>
	.info-packbox {
		width: 124rpx;
		animation: upDownAni 0.8s infinite linear alternate;
	}

	@keyframes upDownAni {
		from {
			transform: translateY(-8rpx);
		}

		to {
			transform: translateY(8rpx);
		}
	}
	
	.info-head {
		z-index: -10;
		border-radius: 100%;
		height: 80rpx;
		width: 80rpx;
		left: 20rpx;
		top: 20rpx;
		margin: auto;
	}

	.info-detail {
		font-size: 24rpx;
		color: #FFFEC2;
		z-index: 100;
		left: -6rpx;
		right: 0;
		top: 140rpx;
		margin: auto;
		min-width: 110%;
		text-align: center;
		
		.info-detail-nums {
			color: #63FFF7;
			margin: 0 4rpx;
		}
	}
</style>